<template lang="pug">
.page-container
    TitleVue(title='页面配置')
    el-form(ref='form', :model='form', label-width='0', size='mini', v-loading='loading')
        el-form-item
            .form-item
                .label 系统logo
                el-input(
                    v-model='form.logo',
                    type='textarea',
                    :rows='3',
                    placeholder='logo样式支持svg格式和base64格式；例如：',
                    clearable
                )
        el-form-item
            .form-item
                .label 系统名称
                el-input(v-model='form.name', placeholder='请输入', clearable)
        //- el-form-item(label='header可见')
        //-     el-switch(v-model='form.headerVisible')
    FooterVue(@confirm="onSubmit")
</template>

<script>
import { PROJECT_NAME_CN } from "@/app-config";
import TitleVue from "@/components/title.vue";
import FooterVue from "@/components/footer.vue";

const defaultLogo =
  "";

export default {
  name: "admin",
  components: { TitleVue, FooterVue },
  data() {
    return {
      loading: false,
      saveLoading: false,
      form: {
        id: "",
        logo: "",
        name: "",
        headerVisible: true,
      },
    };
  },
  computed: {},
  methods: {
    getData() {
      this.loading = true;
      this.$service.manage
        .getReportConf({})
        .then((resp) => {
          const { code, data, message } = resp.body;
          if (code === 0) {
            this.form.id = data.id;
            this.form.logo = data.logo;
            this.form.name = data.platform_name;
            this.form.headerVisible = data.is_show_header;
          } else {
            this.$message.error(message);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    async onSubmit() {
      const flag = await this.$refs.form.validate();
      if (!flag) {
        return;
      }
      this.saveLoading = true;
      const parameters = {
        id: this.form.id,
        platform_name: this.form.name || PROJECT_NAME_CN,
        logo: this.form.logo || defaultLogo,
        is_show_header: this.form.headerVisible,
      };
      this.$service.common
        .setReportConf(parameters)
        .then((resp) => {
          const { code, message } = resp.body;
          if (code === 0) {
            this.$message.success("保存成功");
            this.$store.dispatch("getPageConfig");
          } else {
            this.$message.error(message);
          }
        })
        .finally(() => {
          this.saveLoading = false;
        });
    },
    onCancel() {
      //
    },
  },
  mounted() {
    // this.getData()
  },
};
</script>

<style lang="scss" scoped>
.page-container {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 10px 16px;
  overflow: auto;

  .title {
    margin-bottom: 32px;
  }

  .el-form {
    flex: 1;
    padding: 0 12px;
  }

  .title,
  .footer {
    flex-shrink: 0;
  }

  .form-item {
    display: flex;
    align-items: center;

    .label {
      flex-shrink: 0;
      @include textStyle($fs: 14px, $lh: 20px, $color: $--color-N2, $fw: 500);
      margin-right: 12px;
    }

    .el-input,
    .el-textarea {
      flex: 1;

      ::v-deep {
        input,
        textarea {
          @include textStyle($fs: 14px, $lh: 20px, $color: $--color-N1);

          &::placeholder {
            @include textStyle($fs: 14px, $lh: 20px, $color: $--color-N3);
          }
        }
      }
    }
  }

  .footer {
    padding-bottom: 2px;
  }
}
</style>
